<template>
    <div class="app-container">
        <div class="">
          <el-form ref="form" :model="data" label-width="120px" :rules="rules">
           
            <el-form-item label="旧密码" prop="old_password">
                <el-input prefix-icon="el-icon-key" v-model="data.old_password" show-password minlength="6" maxlength="20" placeholder="密码6-20位，由数字、字母、符号组成"></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="password">
                <el-input prefix-icon="el-icon-key" v-model="data.password" show-password minlength="6" maxlength="20" placeholder="密码6-20位，由数字、字母、符号组成"></el-input>
            </el-form-item>

             <el-form-item label="确认密码" prop="password_confim">
                <el-input prefix-icon="el-icon-key" v-model="data.password_confim" show-password minlength="6" maxlength="20" placeholder="密码6-20位，由数字、字母、符号组成"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button size="mini" type="primary" @click="save()">
                 保存
                </el-button>
            </el-form-item>

            </el-form>
        </div>

    </div>
</template>


<script>
  import {getInfo,saveaccount,resetpassword} from '@/api/user'
  import { MessageBox, Message } from 'element-ui'
  import { getToken } from '@/utils/auth'
 
  export default {
    name: 'password',
    components: { },
    data() {
      //验证密码
      var checkPassword = (rule, value, callback) => {
          const pwReg = /^[\\~!@#$%^&*()-_=+|{}\[\],.?\/:;\'\"\d\w]{6,20}$/

          if (value.length == 0) {
             callback()
          }  else {
            setTimeout(() => {
                if (pwReg.test(value)) {
                  callback()
                } else {
                  callback(new Error('密码格式不正确，密码6-20位，由数字、字母、符号组成'))
                }
            }, 100)
          }
      };

      //验证两次密码是否一致
      var checkPasswordConfim = (rule, value, callback) => {
          if (this.data.password.length == 0) {
            callback()
          } else {
            if (value != this.data.password) { 
               callback(new Error('两次密码不一致！'))
            } else {
               callback()
            }
          }
          
      };
      return {
        baseapi: process.env.VUE_APP_BASE_API,
        headers: {'Authorization': getToken()},
        loading: false,
        data: {
         
        },
        rules: {
            old_password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { trigger: 'blur', validator: checkPassword }
            ],
            password: [
                { required: true, message: '请输入新密码', trigger: 'blur' },
                { trigger: 'blur', validator: checkPassword }
            ],
            password_confim: [
                { required: false, message: '请输入确认密码', trigger: 'blur' },
                { trigger: 'blur', validator: checkPasswordConfim }
            ],
        },
      }
    },
    created(){
      
    },
    computed: {
       
    },
    watch: {
       
    },
    methods: {
      //保存信息
      save(){
        this.$refs['form'].validate((valid) => {
            if (valid) {
                resetpassword(this.data).then((res) => {
                    var code = res.code;
                    var msg = res.msg;
                    if (code == 200) {
                        this.$message.success(msg);
                    } else {
                        this.$message.error(msg);
                    }
                })
            }
        })
      },
    }
  }
</script>